<template>
  <div class="picture-manage">
    <a-spin :spinning="loading">
      <!-- 统计卡片区域 -->
      <a-row :gutter="[16, 16]" class="stats-row">
        <a-col :span="6">
          <div class="stat-card pending">
            <div class="stat-icon">
              <FileImageOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">待审核图片</div>
              <div class="stat-value">{{ statistics.pending }}</div>
              <!-- <div class="stat-desc">较昨日 +12%</div> -->
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card reviewed">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日已审核</div>
              <div class="stat-value">{{ statistics.todayApprovedCount }}</div>
              <!-- <div class="stat-desc">审核效率 98%</div> -->
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card violations">
            <div class="stat-icon">
              <WarningOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">累计违规</div>
              <div class="stat-value">{{ statistics.violations }}</div>
              <div class="stat-desc">违规率 0.8%</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card total">
            <div class="stat-icon">
              <PictureOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">总图片数</div>
              <div class="stat-value">{{ statistics.total }}</div>
              <div class="stat-desc">本月增长 23%</div>
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 主要内容区域 -->
      <div class="content-area">
        <!-- 筛选区域 - 重新开发，与"我的文件"页面保持一致 -->
        <div class="filter-area">
          <div class="filter-left">
            <a-form layout="inline" class="filter-form">
              <a-form-item label="审核状态">
                <a-select
                  v-model:value="queryParams.status"
                  style="width: 120px"
                  placeholder="请选择"
                  allowClear
                >
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option
                    v-for="option in statusOptions"
                    :key="option.value"
                    :value="option.value"
                  >
                    {{ option.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="上传时间">
                <a-range-picker
                  v-model:value="queryParams.dateRange"
                  :locale="locale"
                  :show-time="{ format: 'HH:mm:ss' }"
                  format="YYYY-MM-DD HH:mm:ss"
                  :placeholder="['开始日期', '结束日期']"
                />
              </a-form-item>

              <a-form-item label="关键词">
                <a-input-search
                  v-model:value="queryParams.searchText"
                  placeholder="请输入关键词"
                  style="width: 260px"
                  @search="handleSearch"
                  allowClear
                />
              </a-form-item>
            </a-form>
          </div>

          <div class="filter-right">
            <a-space>
              <a-button type="primary" @click="handleSearch">
                <template #icon><SearchOutlined /></template>
                查询
              </a-button>
              <a-button @click="handleReset">
                <template #icon><ReloadOutlined /></template>
                重置
              </a-button>
            </a-space>
          </div>
        </div>

        <!-- 筛选器 -->
        <div class="filter-section">
          <div class="filter-header">
            <a-space>
              <a-radio-group v-model:value="viewMode" size="small" class="view-mode">
                <a-radio-button value="table">
                  <UnorderedListOutlined />
                  列表
                </a-radio-button>
                <a-radio-button value="grid">
                  <AppstoreOutlined />
                  网格
                </a-radio-button>
              </a-radio-group>
              <a-button type="primary" @click="handleBatchApprove"> 批量通过 </a-button>
            </a-space>
          </div>
          <div class="filter-content">
            <!-- 表格视图 -->
            <div v-if="viewMode === 'table'" class="table-view">
              <a-table
                :dataSource="imageList"
                :columns="columns"
                :pagination="pagination"
                :loading="loading"
                @change="handleTableChange"
                rowKey="url"
              >
                <!-- 图片列 -->
                <template #bodyCell="{ column, record }">
                  <template v-if="column.dataIndex === 'thumbnailUrl'">
                    <div class="table-image-wrapper">
                      <img
                        :src="IMAGE_PREFIX + (record.thumbnailUrl || record.url)"
                        :alt="record.name"
                        class="table-image"
                      />
                      <div class="status-watermark" :class="[getStatusClass(record.reviewStatus)]">
                        {{ getStatusText(record.reviewStatus) }}
                      </div>
                    </div>
                  </template>
                  <template v-else-if="column.dataIndex === 'tags'">
                    <a-space wrap>
                      <a-tag
                        v-for="tag in record.tagsList ||
                        (record.tags ? JSON.parse(record.tags) : [])"
                        :key="tag"
                        >{{ tag }}</a-tag
                      >
                    </a-space>
                  </template>
                  <template v-else-if="column.dataIndex === 'dimensions'">
                    {{ record.picWidth }} x {{ record.picHeight }}
                  </template>
                  <template v-else-if="column.dataIndex === 'picSize'">
                    {{ (Number(record.picSize) / 1024).toFixed(2) }} KB
                  </template>
                  <template v-else-if="column.dataIndex === 'picFormat'">
                    {{ record.picFormat?.toUpperCase() || '-' }}
                  </template>
                  <template v-else-if="column.dataIndex === 'picScale'">
                    {{ record.picScale ? record.picScale.toFixed(2) : '-' }}
                  </template>
                  <template v-else-if="column.dataIndex === 'likeCount'">
                    {{ formatCount(record.likeCount) }}
                  </template>
                  <template v-else-if="column.dataIndex === 'favoriteCount'">
                    {{ formatCount(record.favoriteCount) }}
                  </template>
                  <template v-else-if="column.dataIndex === 'updateTime'">
                    {{
                      record.updateTime ? dayjs(record.updateTime).format('YYYY-MM-DD HH:mm') : '-'
                    }}
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <a-space>
                      <a-button type="link" @click="handlePreview(record)">
                        <EyeOutlined />预览
                      </a-button>
                      <template v-if="record.reviewStatus === 0">
                        <a-button type="link" @click="handleApprove(record)">
                          <CheckCircleOutlined />通过
                        </a-button>
                        <a-button type="link" danger @click="handleReject(record)">
                          <CloseCircleOutlined />拒绝
                        </a-button>
                      </template>
                      <template v-else-if="record.reviewStatus === 2">
                        <a-button type="link" @click="handleApprove(record)">
                          <CheckCircleOutlined />重新通过
                        </a-button>
                      </template>
                    </a-space>
                  </template>
                  <template v-else>
                    {{ record[column.dataIndex] }}
                  </template>
                </template>
              </a-table>
            </div>

            <!-- 网格视图 -->
            <div v-else class="grid-view">
              <div v-for="row in Math.ceil(imageList.length / 7)" :key="row">
                <div class="grid-row">
                  <div v-for="col in 7" :key="col" class="grid-item">
                    <div v-if="imageList[(row - 1) * 7 + (col - 1)]" class="image-card">
                      <div
                        class="image-wrapper"
                        @click="handlePreview(imageList[(row - 1) * 7 + (col - 1)])"
                      >
                        <img
                          :src="
                            IMAGE_PREFIX + (imageList[(row - 1) * 7 + (col - 1)].thumbnailUrl || '')
                          "
                          :alt="imageList[(row - 1) * 7 + (col - 1)].introduction || '暂无描述'"
                          class="image"
                          @error="() => {}"
                        />
                        <div
                          class="status-watermark" :class="[
                            getStatusClass(imageList[(row - 1) * 7 + (col - 1)].reviewStatus),
                          ]"
                        >
                          {{ getStatusText(imageList[(row - 1) * 7 + (col - 1)].reviewStatus) }}
                        </div>
                        <div class="image-overlay">
                          <div class="overlay-content">
                            <EyeOutlined />
                            <span>预览</span>
                          </div>
                        </div>
                      </div>
                      <div class="image-info">
                        <div class="image-name">
                          {{ imageList[(row - 1) * 7 + (col - 1)].name }}
                        </div>
                        <div class="image-meta">
                          <span class="category">{{
                            imageList[(row - 1) * 7 + (col - 1)].category
                          }}</span>
                          <span class="size"
                            >{{
                              (Number(imageList[(row - 1) * 7 + (col - 1)].picSize) / 1024).toFixed(
                                2
                              )
                            }}
                            KB</span
                          >
                        </div>
                      </div>
                      <div class="card-actions">
                        <a-space>
                          <a-button
                            type="primary"
                            size="small"
                            @click.stop="handlePreview(imageList[(row - 1) * 7 + (col - 1)])"
                          >
                            预览
                          </a-button>
                          <template v-if="imageList[(row - 1) * 7 + (col - 1)].reviewStatus === 0">
                            <a-button
                              type="primary"
                              size="small"
                              @click.stop="handleApprove(imageList[(row - 1) * 7 + (col - 1)])"
                            >
                              通过
                            </a-button>
                            <a-button
                              type="primary"
                              danger
                              size="small"
                              @click.stop="handleReject(imageList[(row - 1) * 7 + (col - 1)])"
                            >
                              拒绝
                            </a-button>
                          </template>
                          <template
                            v-else-if="imageList[(row - 1) * 7 + (col - 1)].reviewStatus === 2"
                          >
                            <a-button
                              type="primary"
                              size="small"
                              @click.stop="handleApprove(imageList[(row - 1) * 7 + (col - 1)])"
                            >
                              重新通过
                            </a-button>
                          </template>
                        </a-space>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 新分页条 -->
              <div class="pagination-bar">
                <a-pagination
                  v-model:current="pagination.current"
                  :total="pagination.total"
                  :pageSize="pagination.pageSize"
                  showSizeChanger
                  showQuickJumper
                  :showTotal="(t: number) => `共 ${t} 张图片`"
                  @change="handleTableChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 拒绝原因模态框 -->
      <a-modal
        v-model:visible="rejectModalVisible"
        title="拒绝原因"
        @ok="confirmReject"
        @cancel="cancelReject"
        class="reject-modal"
        :maskClosable="false"
        centered
        :width="480"
        okText="确认"
        cancelText="取消"
      >
        <a-form :model="rejectForm" layout="vertical">
          <a-form-item
            label="拒绝原因"
            required
            :rules="[{ required: true, message: '请选择拒绝原因' }]"
          >
            <a-select
              v-model:value="rejectForm.reason"
              style="width: 100%"
              placeholder="请选择拒绝原因"
            >
              <a-select-option value="0">
                <WarningOutlined style="color: #ff4d4f" />
                <span class="reason-text">不当内容</span>
              </a-select-option>
              <a-select-option value="1">
                <CopyrightOutlined style="color: #faad14" />
                <span class="reason-text">版权问题</span>
              </a-select-option>
              <a-select-option value="2">
                <PictureOutlined style="color: #1890ff" />
                <span class="reason-text">质量问题</span>
              </a-select-option>
              <a-select-option value="3">
                <InfoCircleOutlined />
                <span class="reason-text">其他问题</span>
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="备注说明">
            <a-textarea
              v-model:value="rejectForm.comment"
              :rows="4"
              placeholder="请输入具体说明..."
              show-count
              :maxLength="200"
            />
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- 图片详情弹窗 -->
      <a-modal
        v-model:open="detailVisible"
        :footer="null"
        width="80%"
        style="max-width: 1200px"
        @cancel="closeImageDetails"
        wrapClassName="image-preview-modal"
      >
        <div class="image-detail" v-if="selectedImage">
          <div class="detail-content">
            <!-- 左侧图片展示 -->
            <div class="detail-image">
              <img :src="IMAGE_PREFIX + selectedImage.thumbnailUrl" :alt="selectedImage.name" />
              <div
                class="status-watermark" :class="[getStatusClass(selectedImage.reviewStatus)]"
                style="top: 16px; left: 16px; right: auto"
              >
                {{ getStatusText(selectedImage.reviewStatus) }}
              </div>
            </div>

            <!-- 右侧信息展示 -->
            <div class="detail-info">
              <h3 class="preview-title">图片信息</h3>
              <div class="info-item">
                <span class="info-label">文件名：</span>
                <span class="info-value">{{ selectedImage.name }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">描述：</span>
                <span class="info-value" :class="{ 'empty-text': !selectedImage.introduction }">
                  {{ selectedImage.introduction || '暂无描述' }}
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">分类：</span>
                <a-tag v-if="selectedImage.category" class="info-tag">{{ selectedImage.category }}</a-tag>
                <span v-else class="empty-text">未分类</span>
              </div>
              <div class="info-item">
                <span class="info-label">标签：</span>
                <div class="info-value">
                  <template v-if="selectedImage.tagsList && selectedImage.tagsList.length">
                    <div class="tags-list">
                      <template v-for="(tag, index) in selectedImage.tagsList" :key="tag">
                        <template v-if="index < 4">
                          <a-tag class="info-tag">{{ tag }}</a-tag>
                        </template>
                      </template>
                      <a-tooltip
                        v-if="selectedImage.tagsList.length > 4"
                        :title="selectedImage.tagsList.slice(4).join(', ')"
                      >
                        <a-tag class="info-tag"> +{{ selectedImage.tagsList.length - 4 }} </a-tag>
                      </a-tooltip>
                    </div>
                  </template>
                  <span v-else class="empty-text">暂无标签</span>
                </div>
              </div>
              <div class="info-item">
                <span class="info-label">大小：</span>
                <span class="info-value">{{ (Number(selectedImage.picSize) / 1024).toFixed(2) }} KB</span>
              </div>
              <div class="info-item">
                <span class="info-label">分辨率：</span>
                <span class="info-value">{{ selectedImage.picWidth }} × {{ selectedImage.picHeight }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">格式：</span>
                <span class="info-value">{{ selectedImage.picFormat?.toUpperCase() || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">创建时间：</span>
                <span class="info-value" :class="{ 'empty-text': !selectedImage.createTime }">
                  {{
                    selectedImage.createTime
                      ? dayjs(selectedImage.createTime).format('YYYY-MM-DD HH:mm:ss')
                      : '未知'
                  }}
                </span>
              </div>
              <div class="info-item" v-if="selectedImage.reviewStatus === 2">
                <span class="info-label reject-label">拒绝理由：</span>
                <span class="info-value reject-value">{{ selectedImage.reviewMessage || '无' }}</span>
              </div>
              <!-- 操作按钮 -->
              <div class="action-buttons">
                <a-space>
                  <template v-if="selectedImage.reviewStatus === 0">
                    <a-button type="primary" @click="handleApprove(selectedImage)"> 通过 </a-button>
                    <a-button type="primary" danger @click="handleReject(selectedImage)">拒绝</a-button>
                  </template>
                  <template v-else-if="selectedImage.reviewStatus === 2">
                    <a-button type="primary" @click="handleApprove(selectedImage)">重新通过</a-button>
                  </template>
                </a-space>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
  import { IMAGE_PREFIX } from '@/config/constants'
  import { ref, reactive, onMounted } from 'vue'
  import { message } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import {
    FileImageOutlined,
    CheckCircleOutlined,
    WarningOutlined,
    PictureOutlined,
    SearchOutlined,
    ReloadOutlined,
    UnorderedListOutlined,
    AppstoreOutlined,
    CopyrightOutlined,
    InfoCircleOutlined,
    EyeOutlined,
    CloseCircleOutlined,
  } from '@ant-design/icons-vue'
  import {
    getPictureListUsingGet1,
    getStatisticsUsingGet1,
    approvePictureUsingPost1,
    rejectPictureUsingPost1,
    batchApprovePicturesUsingPost1,
  } from '@/api/tupianshenheguanli'
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
  import 'dayjs/locale/zh-cn'

  // 设置 dayjs 语言为中文
  dayjs.locale('zh-cn')

  // 统计数据
  const statistics = reactive({
    pending: '0',
    todayApprovedCount: '0',
    violations: '0',
    total: '0',
  })

  // 查询参数
  const queryParams = reactive({
    status: '待审核' as string | undefined,
    dateRange: [] as (string | Date)[],
    searchText: '',
    page: 1,
    pageSize: 35,
  })

  // 状态选项
  const statusOptions = [
    { label: '待审核', value: '待审核' },
    { label: '通过', value: '通过' },
    { label: '拒绝', value: '拒绝' },
  ]

  // 表格列定义
  const columns = [
    { title: '预览', dataIndex: 'thumbnailUrl', key: 'thumbnailUrl', width: 100 },
    { title: '名称', dataIndex: 'name', key: 'name', width: 160 },
    { title: '分类', dataIndex: 'category', key: 'category', width: 100 },
    { title: '标签', dataIndex: 'tags', key: 'tags', width: 180 },
    { title: '尺寸', dataIndex: 'dimensions', key: 'dimensions', width: 120 },
    { title: '大小', dataIndex: 'picSize', key: 'picSize', width: 100 },
    { title: '格式', dataIndex: 'picFormat', key: 'picFormat', width: 80 },
    { title: '宽高比', dataIndex: 'picScale', key: 'picScale', width: 80 },
    { title: '点赞数', dataIndex: 'likeCount', key: 'likeCount', width: 100 },
    { title: '收藏数', dataIndex: 'favoriteCount', key: 'favoriteCount', width: 100 },
    { title: '更新时间', dataIndex: 'updateTime', key: 'updateTime', width: 160 },
    { title: '操作', key: 'action', width: 200, fixed: 'right' },
  ]

  // 表格数据
  const imageList = ref<{
    id: string | number;
    thumbnailUrl?: string;
    introduction?: string;
    reviewStatus: number;
    name: string;
    category: string;
    picSize: string | number;
    [key: string]: unknown;
  }[]>([])
  const loading = ref(false)
  const selectedKeys = ref<number[]>([])

  // 添加视图模式切换
  const viewMode = ref('grid') // 'grid' 或 'table'

  // 修改分页配置
  const pagination = reactive({
    current: 1,
    pageSize: 35,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条记录`,
  })

  // 拒绝模态框
  const rejectModalVisible = ref(false)
  const rejectForm = reactive({
    reason: undefined,
    comment: '',
  })
  const currentRejectImage = ref<{ id: string | number } | null>(null)

  // 预览相关
  const detailVisible = ref(false)
  const selectedImage = ref<{
    id: string | number;
    thumbnailUrl?: string;
    introduction?: string;
    reviewStatus: number;
    name: string;
    category: string;
    picSize: string | number;
    picWidth?: number;
    picHeight?: number;
    picFormat?: string;
    createTime?: string;
    reviewMessage?: string;
    tagsList?: string[];
    [key: string]: unknown;
  } | null>(null)

  // 获取状态文本
  const getStatusText = (reviewStatus: number) => {
    const texts: Record<number, string> = {
      0: '待审核',
      1: '已通过',
      2: '已拒绝',
    }
    return texts[reviewStatus] || '未知'
  }

  // 数字格式化函数，仿照首页
  const formatCount = (num: number | undefined) => {
    if (!num) return 0
    if (num < 10000) return num
    return (num / 10000).toFixed(1).replace(/\.0$/, '') + 'w'
  }

  // 获取统计数据
  const fetchStatistics = async () => {
    try {
      const res = await getStatisticsUsingGet1()
      if (res.data.code === 200 && res.data.data) {
        // 直接使用接口返回的数据更新统计卡片
        const data = res.data.data
        statistics.pending = data.pendingCount || '0'
        statistics.todayApprovedCount = data.todayApprovedCount || '0'
        statistics.violations = data.violationCount || '0'
        statistics.total = data.totalCount || '0'
      }
    } catch {
      message.error('获取统计数据失败')
    }
  }

  // 获取图片列表
  const fetchImageList = async () => {
    loading.value = true
    try {
      const params = {
        pageNo: pagination.current,
        pageSize: pagination.pageSize,
        searchText: queryParams.searchText || undefined,
        status: queryParams.status,
        startTime: queryParams.dateRange[0]
          ? dayjs(queryParams.dateRange[0]).format('YYYY-MM-DD HH:mm:ss')
          : undefined,
        endTime: queryParams.dateRange[1]
          ? dayjs(queryParams.dateRange[1]).format('YYYY-MM-DD HH:mm:ss')
          : undefined,
      }

      console.log('查询参数：', params)
      const res = await getPictureListUsingGet1(params)

      if (res.data.code === 200 && res.data.data) {
        imageList.value = res.data.data.list || []
        // 更新分页信息
        pagination.total = Number(res.data.data.totalCount) || 0
        pagination.current = Number(res.data.data.pageNo) || 1
        pagination.pageSize = Number(res.data.data.pageSize) || 35
      } else {
        message.error(res.data.message || '获取图片列表失败')
      }
    } catch (error) {
      console.error('获取图片列表错误：', error)
      message.error('获取图片列表失败')
    } finally {
      loading.value = false
    }
  }

  // 处理审核通过
  const handleApprove = async (record: { id: string | number }) => {
    try {
      const res = await approvePictureUsingPost1({
        pictureId: record.id,
      })
      if (res.data.code === 200) {
        message.success('审核通过成功')
        fetchImageList()
        fetchStatistics()
      } else {
        message.error(res.data.message || '操作失败')
      }
    } catch  {
      message.error('操作失败')
    }
  }

  // 处理批量通过
  const handleBatchApprove = async () => {
    if (selectedKeys.value.length === 0) {
      message.warning('请选择要审核的图片')
      return
    }
    try {
      const res = await batchApprovePicturesUsingPost1({
        pictureIds: selectedKeys.value,
      })
      if (res.data.code === 200) {
        message.success('批量审核通过成功')
        selectedKeys.value = []
        fetchImageList()
        fetchStatistics()
      }
    } catch {
      message.error('操作失败')
    }
  }

  // 处理拒绝
  const handleReject = async (record: { id: string | number }) => {
    currentRejectImage.value = record
    rejectModalVisible.value = true
  }

  // 确认拒绝
  const confirmReject = async () => {
    if (!rejectForm.reason) {
      message.warning('请选择拒绝原因')
      return
    }
    try {
      if (!currentRejectImage.value) return
      const res = await rejectPictureUsingPost1(
        { pictureId: currentRejectImage.value.id },
        {
          reviewMessage: rejectForm.comment,
          reason: rejectForm.reason,
        } as { reviewMessage: string; reason: string }
      )
      if (res.data.code === 200) {
        message.success('已拒绝该图片')
        fetchImageList()
        fetchStatistics()
        // 关闭弹窗
        rejectModalVisible.value = false
      }
    } catch {
      message.error('操作失败')
    }
  }

  // 取消拒绝
  const cancelReject = () => {
    rejectForm.reason = undefined
    rejectForm.comment = ''
    currentRejectImage.value = null
    rejectModalVisible.value = false
  }

  // 处理查询
  const handleSearch = () => {
    pagination.current = 1 // 重置页码
    fetchImageList()
  }

  // 重置查询
  const handleReset = () => {
    queryParams.status = '待审核'
    queryParams.dateRange = []
    queryParams.searchText = ''
    pagination.current = 1
    fetchImageList()
  }

  // 处理表格分页、排序、筛选变化
  const handleTableChange = (page: number, pageSize?: number) => {
    // 兼容 a-pagination 的分页事件
    pagination.current = page
    if (pageSize) {
      pagination.pageSize = pageSize
    }
    fetchImageList()
  }

  // 预览图片
  const handlePreview = (record: { id: string | number; [key: string]: unknown }) => {
    selectedImage.value = record as {
      id: string | number;
      thumbnailUrl?: string;
      introduction?: string;
      reviewStatus: number;
      name: string;
      category: string;
      picSize: string | number;
      picWidth?: number;
      picHeight?: number;
      picFormat?: string;
      createTime?: string;
      reviewMessage?: string;
      tagsList?: string[];
      [key: string]: unknown;
    }
    detailVisible.value = true
  }

  // 关闭预览
  const closeImageDetails = () => {
    detailVisible.value = false
    selectedImage.value = null
  }

  // 获取状态对应的类名
  const getStatusClass = (reviewStatus: number) => {
    const classes: Record<number, string> = {
      0: 'status-pending',
      1: 'status-approved',
      2: 'status-rejected',
    }
    return classes[reviewStatus] || 'status-pending'
  }

  onMounted(() => {
    fetchImageList()
    fetchStatistics()
  })
</script>

<style scoped>
  .picture-manage {
    padding: 24px;
    background: var(--theme-background);
    min-height: calc(100vh - 64px);
    transition: all 0.3s ease;
  }

  /* 统计卡片样式 - 重新开发，完全主题适配 */
  .stat-card {
    padding: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
    box-shadow: 0 2px 8px var(--theme-shadow);
  }

  .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--theme-shadow);
  }

  /* 深色主题下的统计卡片 */
  [data-theme="dark"] .stat-card.pending {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.15) 0%, rgba(24, 144, 255, 0.25) 100%);
    border: 1px solid rgba(24, 144, 255, 0.3);
  }

  [data-theme="dark"] .stat-card.reviewed {
    background: linear-gradient(135deg, rgba(82, 196, 26, 0.15) 0%, rgba(82, 196, 26, 0.25) 100%);
    border: 1px solid rgba(82, 196, 26, 0.3);
  }

  [data-theme="dark"] .stat-card.violations {
    background: linear-gradient(135deg, rgba(255, 77, 79, 0.15) 0%, rgba(255, 77, 79, 0.25) 100%);
    border: 1px solid rgba(255, 77, 79, 0.3);
  }

  [data-theme="dark"] .stat-card.total {
    background: linear-gradient(135deg, rgba(114, 46, 209, 0.15) 0%, rgba(114, 46, 209, 0.25) 100%);
    border: 1px solid rgba(114, 46, 209, 0.3);
  }

  /* 浅色主题下的统计卡片 */
  [data-theme="light"] .stat-card.pending {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.12) 100%);
    border: 1px solid rgba(24, 144, 255, 0.2);
  }

  [data-theme="light"] .stat-card.reviewed {
    background: linear-gradient(135deg, rgba(82, 196, 26, 0.08) 0%, rgba(82, 196, 26, 0.12) 100%);
    border: 1px solid rgba(82, 196, 26, 0.2);
  }

  [data-theme="light"] .stat-card.violations {
    background: linear-gradient(135deg, rgba(255, 77, 79, 0.08) 0%, rgba(255, 77, 79, 0.12) 100%);
    border: 1px solid rgba(255, 77, 79, 0.2);
  }

  [data-theme="light"] .stat-card.total {
    background: linear-gradient(135deg, rgba(114, 46, 209, 0.08) 0%, rgba(114, 46, 209, 0.12) 100%);
    border: 1px solid rgba(114, 46, 209, 0.2);
  }

  .stat-icon {
    font-size: 32px;
    padding: 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  /* 深色主题下的图标 */
  [data-theme="dark"] .pending .stat-icon {
    color: #40a9ff;
    background: rgba(24, 144, 255, 0.15);
  }

  [data-theme="dark"] .reviewed .stat-icon {
    color: #73d13d;
    background: rgba(82, 196, 26, 0.15);
  }

  [data-theme="dark"] .violations .stat-icon {
    color: #ff7875;
    background: rgba(255, 77, 79, 0.15);
  }

  [data-theme="dark"] .total .stat-icon {
    color: #b37feb;
    background: rgba(114, 46, 209, 0.15);
  }

  /* 浅色主题下的图标 */
  [data-theme="light"] .pending .stat-icon {
    color: #1890ff;
    background: rgba(24, 144, 255, 0.08);
  }

  [data-theme="light"] .reviewed .stat-icon {
    color: #52c41a;
    background: rgba(82, 196, 26, 0.08);
  }

  [data-theme="light"] .violations .stat-icon {
    color: #ff4d4f;
    background: rgba(255, 77, 79, 0.08);
  }

  [data-theme="light"] .total .stat-icon {
    color: #722ed1;
    background: rgba(114, 46, 209, 0.08);
  }

  .stat-content {
    flex: 1;
  }

  .stat-title {
    color: var(--theme-textSecondary);
    font-size: 14px;
    transition: color 0.3s ease;
  }

  .stat-value {
    font-size: 24px;
    font-weight: 600;
    margin: 8px 0;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .stat-desc {
    font-size: 12px;
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  /* 内容区域样式 */
  .content-area {
    background: var(--theme-surface);
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
    border: 1px solid var(--theme-border);
    box-shadow: 0 1px 2px var(--theme-shadow);
    transition: all 0.3s ease;
  }

  /* 筛选区域样式 - 重新开发，与"我的文件"页面保持一致 */
  .filter-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--theme-surface);
    border-bottom: 1px solid var(--theme-border);
    margin-bottom: 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .filter-left {
    flex: 1;
  }

  .filter-right {
    flex-shrink: 0;
  }

  .filter-form {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .filter-form :deep(.ant-form-item) {
    margin-bottom: 0;
  }

  .filter-form :deep(.ant-form-item-label > label) {
    color: var(--theme-text);
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .filter-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .filter-content {
    padding: 24px;
    background: var(--theme-background);
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  /* 表格视图样式 */
  .table-image-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }

  .table-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .basic-info {
    padding: 4px 16px;
  }

  .info-name {
    font-weight: 500;
    margin-bottom: 4px;
  }

  .info-desc {
    color: var(--theme-textSecondary);
    margin-bottom: 8px;
    transition: color 0.3s ease;
  }

  .info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .image-params {
    padding: 4px 0;
  }

  .param-item {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .param-label {
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  .time-info {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-table-thead > tr > th) {
    background: var(--theme-background);
    font-weight: 500;
    padding: 16px 8px;
    color: var(--theme-text);
    border-bottom: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-table-tbody > tr > td) {
    padding: 12px 8px;
    color: var(--theme-text);
    border-bottom: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-table-row:hover) {
    background: var(--theme-background);
  }

  :deep(.ant-btn-link) {
    padding: 4px 8px;
    height: auto;
  }

  :deep(.ant-btn-link .anticon) {
    margin-right: 4px;
  }

  /* 网格布局容器 */
  .grid-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .grid-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
  }

  .grid-item {
    break-inside: avoid;
  }

  /* 卡片样式 */
  .image-card {
    background: var(--theme-surface);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px var(--theme-shadow);
    border: 1px solid var(--theme-border);
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .image-wrapper {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
  }

  .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .image-card:hover .image-overlay {
    opacity: 1;
  }

  .overlay-content {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .image-info {
    padding: 12px;
  }

  .image-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .image-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
  }

  .category {
    color: #1890ff;
  }

  .card-actions {
    padding: 12px;
    display: flex;
    justify-content: center;
    border-top: 1px solid #f0f0f0;
  }

  /* 分页样式 */
  .pagination {
    margin: 40px 0 24px;
    display: flex;
    justify-content: center;
  }

  :deep(.ant-pagination) {
    display: flex;
    align-items: center;
  }

  /* 其他样式 */
  .uploader-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .uploader-details {
    display: flex;
    flex-direction: column;
  }

  .uploader-name {
    font-weight: 500;
  }

  .upload-time {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
  }

  :deep(.ant-table-thead > tr > th) {
    background: #fafafa;
  }

  :deep(.ant-form-item) {
    margin-bottom: 0;
  }

  .image-info {
    padding: 8px 0;
  }

  .image-title {
    font-weight: 500;
    margin-bottom: 8px;
  }

  .image-meta {
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 8px;
  }

  .image-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  :deep(.ant-table-tbody > tr > td) {
    vertical-align: top;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* 修改预览弹窗样式 */
  .image-detail {
    display: flex;
    height: 600px;
  }

  .detail-image {
    flex: 1;
    padding: 20px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .detail-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .detail-info {
    width: 300px;
    padding: 20px;
    border-left: 1px solid #f0f0f0;
    overflow-y: auto;
  }

  .info-item {
    margin-bottom: 16px;
    line-height: 1.5;
  }

  .info-item strong {
    color: #666;
    display: inline-block;
    margin-right: 8px;
  }

  .detail-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }

  :deep(.ant-modal-content) {
    border-radius: 8px;
    overflow: hidden;
  }

  :deep(.ant-modal-body) {
    padding: 0;
  }

  :deep(.ant-tag) {
    margin: 4px;
  }

  .search-form {
    margin-bottom: 16px;
    padding: 24px;
    background: #fff;
    border-radius: 4px;
  }

  :deep(.ant-form-item) {
    margin-bottom: 16px;
  }

  :deep(.ant-range-picker) {
    width: 360px;
  }

  /* 添加水印样式 */
  .table-image-wrapper,
  .image-wrapper {
    position: relative;
  }

  .status-watermark {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: white;
    z-index: 2;
  }

  .status-pending {
    background-color: #faad14;
  }

  .status-approved {
    background-color: #52c41a;
  }

  .status-rejected {
    background-color: #ff4d4f;
  }

  /* 确保水印在悬停效果之上 */
  .image-overlay {
    z-index: 1;
  }

  /* 修改拒绝原因模态框样式 */
  .reject-modal {
    :deep(.ant-modal-content) {
      padding: 0;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    :deep(.ant-modal-header) {
      padding: 16px 24px;
      border-bottom: 1px solid #f0f0f0;
      border-radius: 8px 8px 0 0;
      background: #fafafa;
    }

    :deep(.ant-modal-title) {
      font-size: 16px;
      font-weight: 500;
      color: #000000d9;
    }

    :deep(.ant-modal-body) {
      padding: 24px;
    }

    :deep(.ant-modal-footer) {
      padding: 16px 24px;
      border-top: 1px solid #f0f0f0;
      border-radius: 0 0 8px 8px;
      background: #fafafa;
    }

    :deep(.ant-select-item-option-content) {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    :deep(.reason-text) {
      margin-left: 8px;
    }

    :deep(.ant-btn) {
      height: 32px;
      padding: 4px 16px;
      font-size: 14px;
    }

    :deep(.ant-btn-primary) {
      background: #1890ff;
      border-color: #1890ff;
    }

    :deep(.ant-form-item-label) {
      font-weight: 500;
    }

    :deep(.ant-select-selector) {
      height: 36px !important;
      padding: 4px 11px !important;
    }

    :deep(.ant-select-selection-item) {
      line-height: 28px !important;
    }

    :deep(.ant-textarea) {
      border-radius: 4px;
      resize: none;
    }
  }

  /* 图片预览弹窗样式 */
  :deep(.image-preview-modal) {
    .ant-modal {
      height: 80vh;
      padding-bottom: 0;
    }

    .ant-modal-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      overflow: hidden;
      background: var(--theme-surface);
      color: var(--theme-text);
      transition: all 0.3s ease;
    }

    .ant-modal-body {
      flex: 1;
      overflow: auto;
      padding: 24px;
      background: var(--theme-surface);
      color: var(--theme-text);
      transition: all 0.3s ease;
    }
  }

  .image-detail {
    height: 100%;
  }

  .detail-content {
    display: flex;
    gap: 32px;
    height: 100%;
  }

  .detail-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-background);
    border-radius: 12px;
    overflow: hidden;
    max-height: calc(80vh - 100px);
    box-shadow: 0 4px 12px var(--theme-shadow);
    transition: all 0.3s ease;
    position: relative;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }
  }

  .detail-info {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 20px;
    background: var(--theme-background);
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  /* 预览标题样式 */
  .preview-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  /* 深色主题下的标题 */
  [data-theme="dark"] .preview-title {
    color: #ff00ff !important; /* 洋红色，在深色主题下醒目 */
    text-shadow: 0 1px 3px rgba(255, 0, 255, 0.5) !important;
  }

  /* 浅色主题下的标题 */
  [data-theme="light"] .preview-title {
    color: #1890ff !important; /* 蓝色，在浅色主题下清晰 */
    text-shadow: none !important;
  }

  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--theme-border);
    transition: border-color 0.3s ease;

    &:last-child {
      border-bottom: none;
    }
  }

  /* 信息标签样式 */
  .info-label {
    width: 80px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--theme-textSecondary);
    transition: all 0.3s ease;
  }

  /* 深色主题下的标签 */
  [data-theme="dark"] .info-label {
    color: #00ffff !important; /* 青色，在深色主题下醒目 */
    text-shadow: 0 1px 3px rgba(0, 255, 255, 0.5) !important;
  }

  /* 浅色主题下的标签 */
  [data-theme="light"] .info-label {
    color: #666666 !important; /* 深灰色，在浅色主题下清晰 */
    text-shadow: none !important;
  }

  /* 信息值样式 */
  .info-value {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  /* 深色主题下的值 */
  [data-theme="dark"] .info-value {
    color: #ffff00 !important; /* 黄色，在深色主题下醒目 */
    text-shadow: 0 1px 3px rgba(255, 255, 0, 0.5) !important;
  }

  /* 浅色主题下的值 */
  [data-theme="light"] .info-value {
    color: #333333 !important; /* 深黑色，在浅色主题下清晰 */
    text-shadow: none !important;
  }

  .tags-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .info-tag {
    margin: 0;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    color: var(--theme-surface);
    transition: all 0.3s ease;
    font-weight: 500;

    &:hover {
      background: var(--theme-secondary);
      border-color: var(--theme-secondary);
      color: var(--theme-surface);
    }
  }

  /* 深色主题下的标签优化 */
  [data-theme="dark"] .info-tag {
    background: #1890ff;
    border-color: #1890ff;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(24, 144, 255, 0.3);
  }

  [data-theme="dark"] .info-tag:hover {
    background: #40a9ff;
    border-color: #40a9ff;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.4);
  }

  .empty-text {
    color: var(--theme-textSecondary);
    font-style: italic;
    transition: color 0.3s ease;
  }

  /* 驳回标签样式 */
  .reject-label {
    color: #ff4d4f !important; /* 红色 */
    text-shadow: 0 1px 3px rgba(255, 77, 79, 0.5) !important;
  }

  /* 驳回值样式 */
  .reject-value {
    color: #ff4d4f !important; /* 红色 */
    text-shadow: 0 1px 3px rgba(255, 77, 79, 0.5) !important;
  }

  .action-buttons {
    margin-top: 24px;
    text-align: center;
  }

  .action-buttons .ant-btn {
    min-width: 120px;
  }

  /* 输入框样式 - 完全复制"我的文件"页面的实现 */
  :deep(.ant-input-search .ant-input) {
    border-radius: 4px;
    font-size: 14px;
  }

  :deep(.ant-input-search .ant-input-group-addon) {
    display: none;
  }

  /* 筛选区域样式 - 主题适配 */
  :deep(.ant-form-item-label > label) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-select) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-select:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-select-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-select-selector) {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
    transition: all 0.3s ease !important;
  }

  :deep(.ant-select-selector:hover) {
    border-color: var(--theme-primary) !important;
  }

  :deep(.ant-select-focused .ant-select-selector) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
  }

  :deep(.ant-select-selection-placeholder) {
    color: var(--theme-textSecondary) !important;
  }

  :deep(.ant-select-selection-item) {
    color: var(--theme-text) !important;
  }

  :deep(.ant-select-arrow) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-picker) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-picker:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-picker-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-picker-input > input) {
    background: var(--theme-surface);
    color: var(--theme-text);
  }

  :deep(.ant-picker-input > input::placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-picker-separator) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-picker-suffix) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-radio-group) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-radio-button-wrapper) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-radio-button-wrapper:hover) {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
  }

  :deep(.ant-radio-button-wrapper-checked) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-radio-button-wrapper-checked:hover) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-pagination) {
    margin: 16px 0 !important;
    padding: 0 16px;
  }

  :deep(.ant-pagination .ant-pagination-item) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-pagination .ant-pagination-item:hover) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  :deep(.ant-pagination .ant-pagination-item-active) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-pagination .ant-pagination-prev),
  :deep(.ant-pagination .ant-pagination-next) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-pagination .ant-pagination-prev:hover),
  :deep(.ant-pagination .ant-pagination-next:hover) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  :deep(.ant-pagination .ant-pagination-jump-prev),
  :deep(.ant-pagination .ant-pagination-jump-next) {
    color: var(--theme-text);
  }

  :deep(.ant-pagination .ant-pagination-options) {
    color: var(--theme-text);
  }

  :deep(.ant-pagination .ant-pagination-options .ant-select) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
  }

  :deep(.ant-pagination .ant-pagination-options .ant-select:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-pagination .ant-pagination-options .ant-select-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-pagination .ant-pagination-total-text) {
    color: var(--theme-text);
  }

  /* 修复输入框样式 - 完全按照用户管理页面的标准实现 */
  :deep(.ant-input) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-input:focus) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-input::placeholder) {
    color: var(--theme-textSecondary);
  }

  /* 输入框清除按钮样式 */
  :deep(.ant-input-clear-icon) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-input-clear-icon:hover) {
    color: var(--theme-text);
  }

  /* 下拉框样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-select) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-select:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-select-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-select-selector) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-select-selector:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-select-focused .ant-select-selector) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-select-selection-placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-select-selection-item) {
    color: var(--theme-text);
  }

  :deep(.ant-select-arrow) {
    color: var(--theme-textSecondary);
  }

  /* 下拉选项样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-select-dropdown) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: 0 2px 8px var(--theme-shadow);
  }

  :deep(.ant-select-item) {
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-select-item:hover) {
    background: var(--theme-background);
  }

  :deep(.ant-select-item-option-selected) {
    background: var(--theme-primary);
    color: var(--theme-surface);
  }

  /* 日期选择器样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-picker) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-picker:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-picker-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-picker-input > input) {
    background: var(--theme-surface);
    color: var(--theme-text);
  }

  :deep(.ant-picker-input > input::placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-picker-separator) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-picker-suffix) {
    color: var(--theme-textSecondary);
  }

  /* 修复浏览器自动填充状态下的样式问题 */
  /* Webkit浏览器 (Chrome, Safari, Edge) */
  :deep(.ant-input:-webkit-autofill),
  :deep(.ant-input:-webkit-autofill:hover),
  :deep(.ant-input:-webkit-autofill:focus),
  :deep(.ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 修复输入框包装器的自动填充样式 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:hover),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:focus),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* Firefox浏览器 */
  :deep(.ant-input:-moz-autofill),
  :deep(.ant-input:-moz-autofill:focus) {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复密码输入框的自动填充样式 */
  :deep(.ant-input-password .ant-input:-webkit-autofill),
  :deep(.ant-input-password .ant-input:-webkit-autofill:hover),
  :deep(.ant-input-password .ant-input:-webkit-autofill:focus),
  :deep(.ant-input-password .ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 确保自动填充状态下的输入框样式与主题一致 */
  :deep(.ant-input[data-autofill="true"]),
  :deep(.ant-input[data-autofill="true"]:hover),
  :deep(.ant-input[data-autofill="true"]:focus) {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的焦点样式 */
  :deep(.ant-input:-webkit-autofill:focus) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的悬停样式 */
  :deep(.ant-input:-webkit-autofill:hover) {
    border-color: var(--theme-primary) !important;
    transition: all 0.3s ease !important;
  }

  /* 确保所有输入框在自动填充状态下都使用主题颜色 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的图标颜色 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill ~ .anticon) {
    color: var(--theme-textSecondary) !important;
    transition: color 0.3s ease !important;
  }

  /* 修复自动填充状态下的边框样式 */
  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill)) {
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):hover) {
    border-color: var(--theme-primary) !important;
    transition: all 0.3s ease !important;
  }

  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):focus-within) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复搜索框和筛选框的自动填充样式 */
  .filter-area :deep(.ant-input:-webkit-autofill),
  .filter-area :deep(.ant-input:-webkit-autofill:hover),
  .filter-area :deep(.ant-input:-webkit-autofill:focus),
  .filter-area :deep(.ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 修复搜索框和筛选框的包装器自动填充样式 */
  .filter-area :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill),
  .filter-area :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:hover),
  .filter-area :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:focus),
  .filter-area :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 确保搜索框和筛选框在自动填充状态下边框样式一致 */
  .filter-area :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill)) {
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  .filter-area :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):hover) {
    border-color: var(--theme-primary) !important;
    transition: all 0.3s ease !important;
  }

  .filter-area :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):focus-within) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    transition: all 0.3s ease !important;
  }

  /* 强制覆盖所有输入框的背景色，确保没有白色背景 */
  .filter-area :deep(.ant-input),
  .filter-area :deep(.ant-input-affix-wrapper .ant-input) {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  .filter-area :deep(.ant-input:hover),
  .filter-area :deep(.ant-input-affix-wrapper .ant-input:hover) {
    border-color: var(--theme-primary) !important;
    background-color: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  .filter-area :deep(.ant-input:focus),
  .filter-area :deep(.ant-input-affix-wrapper .ant-input:focus) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    background-color: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  .filter-area :deep(.ant-input::placeholder) {
    color: var(--theme-textSecondary) !important;
  }

  /* 强制覆盖输入框包装器的背景色 */
  .filter-area :deep(.ant-input-affix-wrapper) {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  .filter-area :deep(.ant-input-affix-wrapper:hover) {
    border-color: var(--theme-primary) !important;
    background-color: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  .filter-area :deep(.ant-input-affix-wrapper-focused) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    background-color: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  /* 确保关键词搜索输入框在所有状态下都使用主题背景色 */
  .filter-area :deep(.ant-form-item:has(.ant-input)) .ant-input,
  .filter-area :deep(.ant-form-item:has(.ant-input-affix-wrapper)) .ant-input-affix-wrapper .ant-input {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  /* 强制覆盖所有可能的白色背景 */
  .filter-area :deep(.ant-input),
  .filter-area :deep(.ant-input-affix-wrapper),
  .filter-area :deep(.ant-input-affix-wrapper .ant-input),
  .filter-area :deep(.ant-input-affix-wrapper-focused),
  .filter-area :deep(.ant-input-affix-wrapper-focused .ant-input) {
    background-color: var(--theme-surface) !important;
    background: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  /* 确保输入框在任何状态下都不会有白色背景 */
  .filter-area :deep(.ant-input[style*="background"]),
  .filter-area :deep(.ant-input-affix-wrapper[style*="background"]) {
    background-color: var(--theme-surface) !important;
    background: var(--theme-surface) !important;
  }

  /* 覆盖可能的行内样式 */
  .filter-area :deep(.ant-input[style*="background-color"]),
  .filter-area :deep(.ant-input-affix-wrapper[style*="background-color"]) {
    background-color: var(--theme-surface) !important;
    background: var(--theme-surface) !important;
  }
</style>
